<template>
  <div class="form_voluntter">
    <div class="head_volunteer"><strong>在线捐赠物资</strong></div>
    <div class="form">
      <div class="form_left">
        <el-form ref="ruleFormRef" :rules="rules" label-position="left" :model="form" label-width="auto"
          style="max-width: 600px">
          <el-form-item label="捐赠救助站:" prop="materialRescueName">
            <el-select style="width: 59%;" v-model="form.materialRescueName" placeholder="选择救助站"
              @change="handleSelectChange">
              <el-option :label="item.stationName" :value="item.stationName" v-for="item in state.reqHelpList"
                :key="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="地址：" style="margin-left: 7px;">
            <span style="color: #333;">{{ state.address }}</span>
          </el-form-item>
          <el-form-item label="快递单号：" prop="materialCourierNumber">
            <el-input style="width: 59%;" v-model="form.materialCourierNumber" />
          </el-form-item>
          <el-form-item label="物资" prop="materialName">
            <el-radio-group v-model="form.materialName">
              <el-radio value="猫粮" @click="state.isShow = 0">猫粮</el-radio>
              <el-radio value="狗粮" @click="state.isShow = 0">狗粮</el-radio>
              <div></div>
              <el-radio :value="form.otherMaterialName" @click="state.isShow = 1">其他</el-radio>
              <el-input v-show="state.isShow == 1" style="width: 59%;" v-model="form.otherMaterialName" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="捐赠人姓名：" prop="materialUserName">
            <el-input style="width: 59%;" v-model="form.materialUserName" />
          </el-form-item>
          <el-form-item label="是否匿名：" prop="moneyIsAnonym">
            <el-radio-group v-model="form.materialIsAnonym">
              <el-radio value="1">是</el-radio>
              <el-radio value="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="手机号:" prop="materialPhone">
            <el-input style="width: 59%;" v-model="form.materialPhone" />
          </el-form-item>
          <el-form-item label="捐赠留言" style="padding-left: 5px;">
            <el-input style="width: 59%;" v-model="form.materialMessage" />
          </el-form-item>
          <el-form-item>
            <el-button class="btn" @click="submitForm(ruleFormRef)" type="primary">立即捐赠</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="form_right">
        <div class="donateLog">
          <div>捐赠记录</div>
        </div>
        <div class="log">
          <div class="logItem" v-for="(item, index) in state.donationMaterialList" :key="index">
            <div>{{ item.materialUserName }}</div>
            <div>{{ item.materialName }}</div>
            <div>{{ item.materialTime }}</div>
          </div>
        </div>
      </div>

    </div>

  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import type { FormInstance, FormRules, } from 'element-plus'
import { reqDonationMaterial, reqDonationMaterialList, reqHelpList } from "@/api/donate/index.js";
import { ElMessage } from 'element-plus'
import { formatDateTime } from "@/utils/date.js";
const state = reactive({
  donationMaterialList: [],
  isShow: 0,
  reqHelpList: [],
  address: ''
})
// 表单数据
const form = reactive({
  materialUserId:JSON.parse(window.localStorage.getItem("userInfo")).id,
  materialRescueName: "",
  materialCourierNumber: "",
  materialName: "",
  materialUserName: '',
  materialIsAnonym: "",
  materialPhone: "",
  materialMessage: "",
  materialTime: '',
  otherMaterialName: ''
})
const ruleFormRef = ref<FormInstance>()
//表单校验
const rules = reactive<FormRules<RuleForm>>({
  materialRescueName: [
    { required: true, message: '请选择救助站', trigger: 'blur' },
  ],
  materialName: [
    {
      required: true,
      message: '请选择物资',
      trigger: 'blur',
    },
  ],
  materialPhone: [
    {
      required: true,
      message: '请输入手机号码',
      trigger: 'blur',
    },
    { min: 11, max: 11, message: '输入正确的手机号码', trigger: 'blur' },
  ],
  materialCourierNumber: [{
    required: true,
    message: '请输入快递单号',
    trigger: 'blur',
  }],
  materialUserName: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 1, max: 14, message: 'Length should be 1 to 14', trigger: 'blur' },
  ],
  materialIsAnonym: [
    { required: true, message: '请选择是否匿名', trigger: 'change', },
  ],
})
//提价表单
const submitForm = async (formEl: FormInstance | undefined) => {

  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      console.log('submit!', form)
      const res = await reqDonationMaterial(form)
      console.log(res)
      if (res.code === 200) {
        ElMessage({
          message: '物资捐赠成功',
          type: 'success',
        })
        formEl.resetFields()
        getDonateMaterialList()
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
//获取捐赠物资列表
const getDonateMaterialList = async () => {
  const res = await reqDonationMaterialList()
  if (res.code === 200) {
    state.donationMaterialList = res.data
    state.donationMaterialList.forEach(item => {
      if(item.materialTime==null){
          item.materialTime=new Date()
        }
      item.materialTime = formatDateTime(item.materialTime)
    })
  }
}
//获取救助站列表
const getHelpList = async () => {
  const res = await reqHelpList()
  if (res.code === 200) {
    console.log(res.data)
    state.reqHelpList = res.data
  }
}
const handleSelectChange = (val: string) => {
  console.log(val)
  const help = state.reqHelpList.find(item => item.stationName === val)
  console.log(help)
  state.address = help.address
}
//获取捐赠物资列表
onMounted(() => {
  getDonateMaterialList()
  getHelpList()
})
</script>

<style lang="less" scoped>
.form_voluntter {
  width: 100%;
  margin-top: 25px;
}

.head_volunteer {
  font-family: "微软雅黑 Bold", "微软雅黑", sans-serif;
  text-align: center;
  width: 12%;
  background-color: #09C199;
  color: #fff;
  border-radius: 7px 7px 0 0;
}

.form {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;

  .form_left {
    flex: 1;

    .btn {
      background-color: #09C199;
      width: 20%;
      height: 40%;
      margin-top: 10%;
    }
  }

  .form_right {
    position: relative;
    top: -94px;
    width: 30%;
    margin-top: 6%;

    .donateLog {
      min-width: 72px;
      width: 30%;
      font-family: "微软雅黑 Bold", "微软雅黑", sans-serif;
      text-align: center;
      background-color: #09C199;
      color: #fff;
      border-radius: 7px 7px 0 0;
    }

    .log {
      min-width: 210px;
      width: 100%;
      max-height: 500px;
      overflow: scroll;
      border: 1px solid #09C199;
      padding: 10px;

      .logItem {
        display: flex;
        justify-content: space-between;
        color: #333333;
      }
    }

  }
}

.h4 {
  width: 70%;
  margin: 0;
  padding: 20px 0;
  border-top: 1px solid #09C199;
}
</style>